let that;
//不要在这里声明，因为这里声明，获取的会是for循环中的最后一个
let current_row_now;

class EmployeeSystem {
    //构造器
    constructor(tableName, addBtn, btn_return, btn_add) {
        that = this;
        //初始化元素
        this.table = document.querySelector(tableName);
        if (addBtn == null || addBtn == undefined) {
            addBtn = ".add";
        }
        this.addBtn = document.querySelector(addBtn);
        // console.log(that.addBtn);//已成功获取
        // console.log(this.addBtn);//已成功获取
        if (btn_return == null || btn_return == undefined) {
            btn_return = "btn_return";
        }
        this.btn_return = document.getElementById(btn_return);
        // console.log(this.btn_return);//已捕获成功
        if (btn_add == null || btn_add == undefined) {
            btn_add = "btn_add";
        }
        this.btn_add = document.getElementById(btn_add);
        //自定义属性
        this.btn_add.onOff = false;
        // console.log(this.btn_add);//已捕获成功

        //绑定事件
        this.bind();
    }


    bind() {
        //通过循环获得删除和修改两个按键
        this.delete_btn = document.querySelectorAll(".sp_delete");
        // console.log(this.delete_btn);//已捕获成功
        this.modify_btn = document.querySelectorAll(".sp_modify");
        // console.log(this.modify_btn);//已捕获成功
        //添加事件
        this.addBtn.onclick = this.formShow;
        // this.addBtn.addEventListener("click",this.formShow,false);
        this.btn_add.onclick = this.addOrAlert;
        this.btn_return.onclick = this.formNone;

        //添加循环
        for (let i = 1; i < that.table.rows.length; i ++){
            //获取当前行
            let current_row = that.table.rows[i];
            // this.current_row = that.table.rows[i];
            let delete_btn = this.delete_btn;
            let modify_btn = this.modify_btn;
            // console.log(current_row.rowIndex);//已捕获成功
            delete_btn[i-1].onclick = function () {
                that.table.deleteRow(current_row.rowIndex);
                // console.log(current_row.rowIndex);//已捕获成功
            };
            modify_btn[i-1].onclick = function () {
                current_row_now = current_row;
                // console.log(current_row_now);
                that.formShow();
                //变更自定义属性
                that.btn_add.onOff = false;
                //获取btn_add，在修改的情况下点击btn_add时
                that.btn_add.innerHTML = "alter";
            };
            that.btn_add.innerHTML = "add";
        }
        // that.bind();
    }

    formShow() {
        //变更自定义属性
        that.btn_add.onOff = true;
        // console.log(that.btn_add.onOff);
        //获取表单
        let control = document.querySelector(".control");
        control.style.display = "block";
        //重新绑定事件
        that.bind();
    }

    addOrAlert(){
        if (that.btn_add.onOff) {
            //获取input输入框的值
            let input = document.querySelectorAll(".control p input");
            //创建单元行，并放入最后一行
            let tmp_row = that.table.insertRow(that.table.rows.length);
            //在单元行里面添加、创建多个td
            let td_length = that.table.rows[0].cells.length;
            for (let i = 0; i < td_length; i++) {
                //创建单元行内的单元格
                let td = tmp_row.insertCell(i);
                // console.log(td);//已捕获成功
                //判断单元格位置，若为最后一个单元格则：
                if (i == td_length - 1) {
                    td.innerHTML = "<td>\n" +
                        "                <span class=\"sp_delete\">删除</span>\n" +
                        "                <span class=\"sp_modify\">修改</span>\n" +
                        "            </td>";
                    //打破循环，否则下面的会继续执行
                    break;
                }
                td.innerHTML = input[i].value;
            }
        }else{
            //获取input
            let input = document.querySelectorAll(".control p input");
            //获取每行多少单元格
            let td_length = current_row_now.cells.length;
            // console.log(current_row);
            //获取input的值
            //减1的原因是，删除修改已经有了，不需要再修改
            for (let j = 0; j < td_length - 1; j ++) {
                //获取单元格，注意，不要用insertCell，因为insertCell()方法用于表的一行的指定位置插入一个空的 <td> 元素
                let td = current_row_now.cells[j];
                // console.log(td);
                //赋值
                td.innerHTML = input[j].value;
            }
        }
        //重新绑定事件
        that.bind();
    }

    addRow(){
        //获取input输入框的值
        let input = document.querySelectorAll(".control p input");
        // console.log(input);//已捕获成功
        //创建单元行，并放入最后一行
        let tmp_row = that.table.insertRow(that.table.rows.length);
        // console.log(that.table.rows.length);//已捕获成功
        //在单元行里面添加、创建多个td
        let td_length = that.table.rows[0].cells.length;
        for (let i = 0; i < td_length; i++) {
            //创建单元行内的单元格
            let td = tmp_row.insertCell(i);
            // console.log(td);//已捕获成功
            //判断单元格位置，若为最后一个单元格则：
            if (i == td_length - 1) {
                td.innerHTML = "<td>\n" +
                    "                <span class=\"sp_delete\">删除</span>\n" +
                    "                <span class=\"sp_modify\">修改</span>\n" +
                    "            </td>";
                //打破循环，否则下面的会继续执行
                break;
            }
            td.innerHTML = input[i].value;
        }
        //重新绑定事件
        that.bind();
    }

    formNone(){
        //获取表单
        let control = document.querySelector(".control");
        //获取input输入框的值
        let input = document.querySelectorAll(".control p input");
        //清空input的值
        for (let i = 0; i < input.length; i++) {
            input[i].value = "";
        }
        control.style.display = "none";
        //重新绑定事件
        that.bind();
    }
}
